<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="/static/dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="/static/dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="leo">
    <link rel="stylesheet" href="/static/plugins/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/BSA.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="row row-cols-1 row-cols-lg-1 g-3">
                <div class="col">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            市场占有率
                        </div>
                        <div class="card-body">
                            <div id="echarts1" style="width: 100%;height:800px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="row row-cols-1 row-cols-lg-2 g-3">
                <div class="col">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            手机数量
                        </div>
                        <div class="card-body">
                            <div id="echarts2" style="width: 100%;height:800px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            好评率
                        </div>
                        <div class="card-body">
                            <div id="echarts3" style="width: 100%;height:800px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/dist/js/BSA.js"></script>
<script src="/static/plugins/echarts/echarts.min.js"></script>
<script src="/static/js/jquery-3.7.0.min.js"></script>
<script>

    let echarts1 = echarts.init(document.getElementById('echarts1'));
    let echarts2 = echarts.init(document.getElementById('echarts2'));
    let echarts3 = echarts.init(document.getElementById('echarts3'));

    echarts1.setOption({
        title: {
            text: '手机品牌',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [{
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: 'Search Engine'},
                {value: 735, name: 'Direct'},
                {value: 580, name: 'Email'},
                {value: 484, name: 'Union Ads'},
                {value: 300, name: 'Video Ads'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    });
    echarts2.setOption({xAxis: {type: 'value',}, yAxis: {type: 'category',}, tooltip: {trigger: 'item'},});
    echarts3.setOption({xAxis: {type: 'category',}, yAxis: {type: 'value',}, tooltip: {trigger: 'item'},});
    $.ajax({
        url: '/brands/visual',
        type: 'get',
        dataType: 'json',
        success: function (res) {
            console.log(res);
            if (res.code === 200) {
                echarts1.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [{
                        name: '市场占有率',
                        type: 'pie',
                        radius: [30, 300],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: res.brand_pst,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                });
                echarts2.setOption({
                    color: ['#198754'],
                    xAxis: {
                        type: 'value',
                    },
                    yAxis: {
                        inverse: true,
                        type: 'category',
                        data: res.phone_num.name,
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [{
                        name: '手机数量',
                        type: 'bar',
                        data: res.phone_num.num,
                    }]
                });
                echarts3.setOption({
                    color: ['#6f42c1'],
                    xAxis: {
                        type: 'value',
                        max: 100,
                        min: 89
                    },
                    yAxis: {
                        inverse: true,
                        type: 'category',
                        data: res.good_pst.name,
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [{
                        name: '好评率',
                        type: 'line',
                        areaStyle: {},
                        data: res.good_pst.feedback,
                    }]
                });
            }
        }
    });


    //这里是响应式处理
    window.onresize = function () {
        echarts1.resize();
        echarts2.resize();
        echarts3.resize();
    };
</script>
</body>
</html>